<header id="hero" class="">

      <div class="jumbotron masthead">
         <div class="container-fluid">
            <div class="row-fluid">
               <div class="inner span7">
                  <h1>BootMetro</h1>
                  <h2>Metro style web framework</h2>
                  <p>Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 App Store" style, without the need to run on Windows 8.</p>
                  <p>
                     <a class="btn btn-large btn-primary" href="https://github.com/aozora/bootmetro/zipball/master">
                        Download Now
                        <i class="icon-arrow-right-7"></i>
                     </a>
                     <span class="muted">it's free</span>
                     <br/>
                     <span class="label label-success">Latest version: 1.0.0 Alpha1</span>
                  </p>
               </div>
               <div class="span5">
                  <img id="hero-image" class="pull-right" width="500" height="265" src="assets/img/hero4.png" alt="hero">
                  <!--<div id="myFlipView" class="carousel flipview slide">-->
                     <!--<div class="carousel-inner">-->
                        <!--<div class="item active">-->
                           <!--<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">-->
                        <!--</div>-->
                        <!--<div class="item">-->
                           <!--<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">-->
                        <!--</div>-->
                        <!--<div class="item">-->
                           <!--<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">-->
                        <!--</div>-->
                     <!--</div>-->
                     <!--<a class="left carousel-control" href="#myFlipView" data-slide="prev">&#xe0f4;</a>-->
                     <!--<a class="right carousel-control" href="#myFlipView" data-slide="next">&#xe0f1;</a>-->
                  <!--</div>-->
               </div>
            </div>
         </div>
      </div>

</header>



<div id="home-tiles" class="container-fluid metro-responsive-tiles">
   <div class="row-fluid">
      <div class="span4">
         <a class="tile wide imagetext bg-color-orange first" href="https://github.com/aozora/bootmetro">
            <div class="image-wrapper">
               <span class="icon icon-github"></span>
            </div>
            <div class="column-text">
               <div class="text-header2">View project on GitHub</div>
               <div class="text4">
                  <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=aozora&repo=bootmetro&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                  <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=aozora&repo=bootmetro&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
               </div>
            </div>
         </a>
      </div>
      <div class="span4">
         <a class="tile wide imagetext bg-color-green middle" href="./hub.html">
            <div class="image-wrapper">
               <span class="icon icon-grid"></span>
            </div>
            <div class="column-text">
               <div class="text-header3">View the Demo online</div>
            </div>
         </a>
      </div>
      <div class="span4">
         <a class="tile wide imagetext bg-color-blue last" href="https://twitter.com/aozoralabs">
            <div class="image-wrapper">
               <span class="icon icon-twitter"></span>
            </div>
            <div class="column-text">
               <div class="text-header3">Follow on Twitter</div>
            </div>
         </a>
      </div>
   </div>

   <div class="row-fluid">
      <div class="span4">
         <a class="tile wide imagetext bg-color-greenDark first" target="_blank" href="https://github.com/aozora/bootmetro/wiki/Roadmap">
            <div class="image-wrapper">
               <span class="icon icon-map"></span>
            </div>
            <div class="column-text">
               <div class="text-header3">Roadmap</div>
            </div>
         </a>
      </div>
      <div class="span4">
         <a class="tile wide imagetext bg-color-blueDark middle" href="./about.html">
            <div class="image-wrapper">
               <span class="icon icon-info"></span>
            </div>
            <div class="column-text">
               <div class="text-header3">About &amp; Credits</div>
            </div>
         </a>
      </div>
      <div class="span4">
         <div class="tile wide donate bg-color-yellow first" href="https://twitter.com/aozoralabs">
            <div class="text-header">Support the project</div>
            <form class="tile-form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
               <input type="hidden" name="cmd" value="_s-xclick">
               <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
               <input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
               <img alt="" border="0" src="https://www.paypalobjects.com/it_IT/i/scr/pixel.gif" width="1" height="1">
            </form>
         </div>
      </div>
   </div>
</div>

<div class="marketing metro container-fluid">
   <h1>Features</h1>
   <p class="marketing-byline">BootMetro is built on top of the awesome <a target="_blank" href="http://twitter.github.com/bootstrap/index.html">Twitter Bootstrap</a> and <a target="_blank" href="http://html5boilerplate.com/">HTML5 Boilerplate</a> with HTML5, CSS3 and LESS.</p>

   <div class="row-fluid">
      <div class="span4">
         <h2>Hub</h2>
         <div class="tile wide image">
            <img src="assets/img/detail-hub.png" alt="hub" />
         </div>
         <p>Give more focus to your content. With a Metro style app you give users immediately focus on the primary infos, increasing the usability and reducing the distractions.</p>
         <!--<p>Use the same tile templates as defined for the original Windows 8 MetroUI.</p>-->
      </div>
      <div class="span4">
         <h2>Actions</h2>
         <div class="tile wide image">
            <img src="assets/img/detail-appbar-1.png" alt="appbar" />
         </div>
         <p>Use the ApplicationBar to show contextual icon action.</p>
      </div>
      <div class="span4">
         <h2>Navigation</h2>
         <div class="tile wide image">
            <img src="assets/img/detail-headermenu.png" alt="headermenu" />
         </div>
         <p>Implement the navigation in pure MetroUI style, use back-button and the header menu to provide simple ways to navigate to other pages.</p>
      </div>
   </div>
   <div class="row-fluid">
      <div class="span4">
         <h2>Charms</h2>
         <div class="tile wide image">
            <img src="assets/img/detail-charms.png" alt="charms" />
         </div>
         <p>Create charms panels to show contextual settings.</p>
      </div>
      <div class="span4">
         <h2>Font Icons</h2>
         <div class="tile wide image">
            <img src="assets/img/detail-icons.png" alt="icons" />
         </div>
         <p>With the awesome <a href="http://keyamoon.com/icomoon">IcoMoon</a> font icon set, you can use hundreds of font icons with any color and any dimension.</p>
      </div>
      <div class="span4">
         <h2>Messages</h2>
         <div class="tile wide image">
            <img src="assets/img/metro-messages.png" alt="icons" />
         </div>
         <p>Show messages, warning and errors like Windows 8 do.</p>
      </div>
   </div>
   <div class="row-fluid">
      <div class="span4">
         <h2>ListViews</h2>
         <div class="tile wide image">
            <img src="assets/img/listviews.png" alt="charms" />
         </div>
         <p>Show selectable lists of elements.</p>
      </div>
      <div class="span4">
         <h2>Layouts</h2>
         <div class="tile wide image">
            <img src="holder.js/310x150" alt="layout" />
         </div>
         <p>Choose several Windows 8 layouts to enhance your content.</p>
      </div>
      <div class="span4">
      </div>
   </div>

</div>

<div class="marketing container-fluid">
   <h1>Who's tweeting about Bootmetro ?</h1>
   <a class="twitter-timeline" href="https://twitter.com/search?q=%23bootmetro" data-widget-id="265787903525916672">Tweets about "#bootmetro"</a>
   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
